import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Form, Modal, message, Input} from 'antd';
import {formatMessage} from './intl';
import TextInput from 'Shared/components/TextInput';
import {FORM_BIG_OPTIONS} from '../constants';
import {addPartWarrantyCategory} from './api';
import {validateAdd} from './validate';
import DealerSelectPanel from '../common/DealerSelect/SelectEdit';
import {dealerType} from '../Enum';
const FormItem = Form.Item;
export const dealerConditions = {
    type: dealerType.总代
};
class FormContnet extends Component {
    state = {
        form: {
            dealerId: '',
            dealerCode: '',
            dealerName: '',
            code: '',
            name: '',
            remark: '',
        },
        isValidate: false
    }

    onChange = (value, name) => {
        this.setState({
            form: {
                ...this.state.form,
                [name]: value
            }
        });
    }

    onSelectDealer = data => {
        this.setState({
            form: {
                ...this.state.form,
                dealerId: data.id,
                dealerCode: data.code,
                dealerName: data.name,
            }
        });
    }
    onSubmit = () => {
        const result = validateAdd(this.state.form);
        if(result) {
            this.setState({isValidate: true});
            return message.warn(result);
        }
        const data = {
            dealerId: this.state.form.dealerId,
            code: this.state.form.code,
            name: this.state.form.name,
            remark: this.state.form.remark,
        };
        this.setState({loading: true});
        return addPartWarrantyCategory(data).then(res => {
            if(res.ok && typeof this.props.afterSubmit === 'function')
                this.props.afterSubmit();
            return res;
        });
    }

    render() {
        const {form} = this.state;
        const generateValidateStatus = value => this.state.isValidate && !value ? 'error' : null;
        const dealerInfo = this.state.form.dealerId ? {
            id: this.state.form.dealerId,
            code: this.state.form.dealerCode,
            name: this.state.form.dealerName
        } : null;
        return (
            <Form className="form-standard">
                <FormItem
                    label={formatMessage({
                        id: 'add.form.dealerId',
                        defaultMessage: '总代'
                    })}
                    required
                    validateStatus={generateValidateStatus(form.dealerId)}
                    {...FORM_BIG_OPTIONS.item}>
                    <DealerSelectPanel
                        value={dealerInfo}
                        conditions={dealerConditions}
                        onSelect={this.onSelectDealer} />
                </FormItem>
                <FormItem
                    label={formatMessage({
                        id: 'add.form.code',
                        defaultMessage: '编号'
                    })}
                    {...FORM_BIG_OPTIONS.item}>
                    <Input placeholder={formatMessage({
                        id: 'newPanel.operation.notGenerate',
                        defaultMessage: '尚未生成'
                    })} value={form.code} disabled />
                </FormItem>
                <FormItem
                    label={formatMessage({
                        id: 'add.form.name',
                        defaultMessage: '名称'
                    })}
                    required
                    validateStatus={generateValidateStatus(form.name)}
                    {...FORM_BIG_OPTIONS.item}>
                    <TextInput
                        name="name"
                        value={form.name}
                        onBlur={this.onChange}/>
                </FormItem>
                <FormItem
                    label={formatMessage({
                        id: 'add.form.remark',
                        defaultMessage: '备注'
                    })}
                    {...FORM_BIG_OPTIONS.item}>
                    <TextInput
                        name="remark"
                        type="textarea"
                        value={form.remark}
                        onBlur={this.onChange}/>
                </FormItem>
            </Form>);
    }
}

export default class AddModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
        this.formRef = React.createRef();
    }

    onOk = () => {
        this.formRef.current.onSubmit().then(res => {
            if(res.ok) this.props.onCancel();
            this.setState({
                loading: false
            });
        });
    }

    render() {
        const {loading} = this.state;
        return (
            <div>
                <Modal
                    title={formatMessage({
                        id: 'addModal.modal.title',
                        defaultMessage: '新增'
                    })}
                    maskClosable={false}
                    visible={this.props.visible}
                    destroyOnClose={true}
                    okText={formatMessage({
                        id: 'addModal.modal.okText',
                        defaultMessage: '保存'
                    })}
                    onOk={this.onOk}
                    confirmLoading={loading}
                    onCancel={this.props.onCancel}>
                    <FormContnet afterSubmit={this.props.afterSubmit} ref={this.formRef} />
                </Modal>
            </div>
        );
    }
}

AddModal.propTypes = {
    visible: PropTypes.bool.isRequired,
    onCancel: PropTypes.func.isRequired,
    afterSubmit: PropTypes.func,
};
